<template>
	<view>
		<view class="header">
			<view class="title">{{title}}</view>
			<view class="sub-next-box" @click.stop="next_Click" v-if="subNextTitle?true:false">
				<text class="sub-title" style="color:#6ABF6C;">{{subNextTitle}}</text>
				<image class="arrow" src="https://oss.jxhecong.com/v2/image/arrow_gray@2x.png"></image>
			</view>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<view class="list">
			<view class="item" 
			@click.stop="selectChange(index)"
			:class="{
				'active-item':item.enable&&current==index,
				'row-last-item':index%rowCount==(rowCount-1),
				'un-active-item':!item.enable
			}"
			:style="{'width':`calc(${100.0/rowCount}% - ${(system=='ios'?23.5:25.0)*(rowCount-1)/rowCount}rpx)`}"
			v-for="(item,index) in dataList" 
			:key="index">{{item.name}}</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="list">
			<view class="item" 
			@click.stop="selectChange(index)"
			:class="{
				'active-item':item.enable&&current==index,
				'row-last-item':index%rowCount==(rowCount-1),
				'un-active-item':!item.enable
			}"
			:style="{'width':`calc(${100.0/rowCount}% - ${(system=='ios'?21.5:25.0)*(rowCount-1)/rowCount}rpx)`}"
			v-for="(item,index) in dataList" 
			:key="index">{{item.name}}</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default{
		props:{
			dataList:{
				type:Array,
				default:[]
			},
			title:{
				type:String,
				default:""
			},
			rowCount:{
				type:Number,
				default:3
			},
		    current:{
				type:Number
			},
			subNextTitle:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				system:'ios'
			}
		},
		mounted() {
			const res = uni.getSystemInfoSync();
			const system = res.platform;
			this.system=system;
		},
		methods:{
			selectChange(index){
				let obj=this.dataList[index]
				if(!obj.enable)return
				this.$emit('selectChange',{'index':index})
			},
			next_Click(){
				this.$emit('nextChange')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.title{
		color:#333333;
		font-size:28rpx;
	}
	.list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.item{
		border-radius: 6px;
		border: solid 1rpx #EAEAEA;
		width:calc(25% - 16rpx);
		height:84rpx;
		line-height:84rpx;
		margin-right:18rpx;
		color:#FFFFFF;
		text-align: center;
		font-size:32rpx;
		color:#333333;
		margin-top:14rpx;
	}
	.active-item{
		background: #6ABF6C;
		color:#FFFFFF;
	}
	.row-last-item{
		margin-right:0rpx;
	}
	.un-active-item{
		background:#EAEAEA;
		color:#333333;
	}
	.sub-next-box{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.arrow{
			width:24rpx;
			height:24rpx;
		}
		.sub-title{
			color:#6ABF6C;
			font-size:28rpx;
		}
	}
</style>
